<template>
  <div class="mainDiv">
    <el-card class="cardSearch">
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入商品名称关键字" v-model="queryInfo.query" clearable>
            <el-button slot="append" type="primary" icon="el-icon-search" @click="getProductList">搜索</el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="cardContent">
      <el-row :gutter="20">
        <el-col v-if="length === 0" :span="24">
          <small>未搜索到相关内容！</small>
        </el-col>
        <el-col
          style="margin-bottom: 10px;"
          v-else
          v-for="item in productData.list"
          :key="item.id"
          :span="spanSize"
        >
          <el-card :body-style="{padding: '0px'}" shadow="hover">
            <img src="../../../assets/logo.png" v-real-img="realImg(item)" width="100%" />
            <div style="padding: 14px;">
              <span>{{item.name}}</span>
              <div class="bottomDiv">
                <small class="priceText">￥{{item.price}}</small>
                <el-button type="text" class="btn" @click="productDetail(item.id)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 6, 12, 18]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="productData.total"
        :hide-on-single-page="pageHide()"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 12
      },
      productData: {},
      length: 0,
      spanSize: 4
    }
  },
  created() {
    this.queryInfo.query = this.$route.query.query
    console.log(this.$route)
    this.getProductList()
  },
  computed: {},
  methods: {
    async getProductList() {
      const { data: res } = await this.$axios.get('manage/product/get_goods_list', {
        params: this.queryInfo
      })
      if (res.status !== 0) return this.$message.error(res.msg)
      this.productData = res.data
      this.length = res.data.size
    },
    realImg(row) {
      if (row.mainImage === null) {
        return 'false'
      }
      return row.imageHost + row.mainImage
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getProductList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getProductList()
    },
    pageHide() {
      if (this.length === 0) return true
      return false
    },
    productDetail(id) {
      const routeData = this.$router.resolve({
        path: '/productDetail',
        query: {
          id: id
        }
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>

<style lang="less" scoped>
.mainDiv {
  margin-top: 50px;
  .cardContent {
    margin-top: 10px;
  }
  .priceText {
    color: red;
  }
  .btn {
    float: right;
  }
  .bottomDiv {
    line-height: 35px;
  }
  .bottomDiv::after {
    clear: both;
  }
}
</style>
